<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新增会议 - 薯饼电商</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 在<head>中添加 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c5545;
            --primary-light: #3a7d62;
            --primary-hover: #1e4636;
            --accent-color: #8ba888;
            --error-color: #d64541;
            --dark-color: #2b2d42;
            --light-color: #f8f9fa;
            --gray-color: #6c757d;
            --bg-page: #e8ecea;
            --shadow: 0 4px 24px rgba(44, 85, 69, 0.1);
            --radius: 12px;
            --transition: all 0.3s ease;
        }

        body {
            background: var(--bg-page);
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }

        .meeting-form-container {
            max-width: 700px;
            margin: 3rem auto;
            padding: 2.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            animation: fadeIn 0.6s ease-out;
            position: relative;
            border: 1px solid rgba(44, 85, 69, 0.1);
        }

        .meeting-form-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        .page-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            position: relative;
            margin-top: 1.5rem;
        }

        .page-header::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px;
        }

        .page-header h2 {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 2rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-header h2 i {
            margin-right: 0.75rem;
            color: var(--primary-color);
        }

        .form-group label {
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 0.5rem;
        }

        .form-control {
            border-radius: var(--radius);
            padding: 0.75rem 1.25rem;
            border: 1px solid #d1d3e2;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(44, 85, 69, 0.25);
        }

        .btn-submit {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border: none;
            border-radius: 50px;
            padding: 0.75rem 2.5rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: var(--transition);
            margin-top: 1.5rem;
            width: 100%;
            max-width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            color: white;
        }

        .btn-submit:hover {
            background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 0.25rem 0.75rem rgba(44, 85, 69, 0.3);
        }

        .btn-back {
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: 999;
            border-radius: 50px;
            padding: 0.5rem 1.25rem;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            font-size: 0.9rem;
        }

        .btn-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
        }

        .alert-danger {
            border-radius: var(--radius);
            padding: 1.25rem;
            margin-top: 1.5rem;
            border-left: 5px solid var(--error-color);
            background-color: rgba(214, 69, 65, 0.05);
        }

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            right: 20px;
            top: 42px;
            color: #d1d3e2;
            transition: var(--transition);
        }

        textarea.form-control:focus + i,
        .form-control:focus + i {
            color: var(--primary-color);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-footer {
            text-align: center;
            margin-top: 3rem;
            color: var(--gray-color);
            font-size: 0.9rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .meeting-form-container {
                padding: 1.5rem;
                margin: 1.5rem;
            }

            .btn-back {
                padding: 0.4rem 1rem;
                font-size: 0.8rem;
            }
        }
        .custom-file-input:focus ~ .custom-file-label {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(44, 85, 69, 0.25);
        }

        .custom-file-label {
            border-radius: var(--radius);
            border: 1px solid #d1d3e2;
            transition: var(--transition);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .custom-file-label::after {
            background-color: var(--primary-light);
            color: white;
        }
        .image-preview-container {
            /* 可选：给预览容器加个默认宽高，比如弹窗或固定区域 */
            width: 300px;
            height: 300px;
            overflow: hidden; /* 超出部分隐藏，避免影响布局 */
        }

        .preview-image {
            /* 关键：让图片最大宽高不超过容器，同时保持比例 */
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 保持比例，完整显示图片（不会拉伸变形） */
        }
    </style>
</head>
<body>
<div id="app" class="meeting-form-container">
    <!-- 返回按钮在左上角 -->
    <a th:href="@{/admin/meeting/list}" class="btn btn-back">
        <i class="fas fa-arrow-left mr-1"></i>返回列表
    </a>

    <div class="page-header">
        <h2><i class="fas fa-calendar-plus"></i>新增会议</h2>
        <p class="text-muted">请填写会议详细信息</p>
    </div>

    <form th:action="@{/admin/meeting/add}" method="post" enctype="multipart/form-data" @submit.prevent="checkForm">
        <div class="form-group input-icon">
            <label for="title">会议名称</label>
            <input type="text" class="form-control" id="title" v-model="meeting.title" name="title" required>
            <i class="fas fa-calendar-alt"></i>
        </div>

        <div class="form-group input-icon">
            <label for="startTime">开始时间</label>
            <input type="datetime-local" class="form-control" id="startTime" v-model="meeting.startTime" name="startTime" required>
        </div>

        <div class="form-group input-icon">
            <label for="endTime">结束时间</label>
            <input type="datetime-local" class="form-control" id="endTime" v-model="meeting.endTime" name="endTime" required>
        </div>

        <div class="form-group input-icon">
            <label for="creator">创建人</label>
            <input type="text" class="form-control" id="creator" v-model="meeting.creator" name="creator" required>
            <i class="fas fa-user"></i>
        </div>

        <div class="form-group input-icon">
            <label for="content">会议内容</label>
            <textarea class="form-control" id="content" v-model="meeting.content" name="content" rows="4" required></textarea>
            <i class="fas fa-file-alt"></i>
        </div>

        <div class="form-group input-icon">
            <label for="coverImage">会议封面图片</label>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="coverImage" name="file"
                           accept="image/*" @change="handleFileUpload">
                    <label class="custom-file-label" for="coverImage">选择图片</label>
                </div>
            </div>

            <!-- 图片预览区域 -->
            <div v-if="previewImage" class="image-preview-container">
                <img :src="previewImage" alt="封面预览" class="preview-image">
                <p class="mt-2 text-sm text-muted">图片将上传至服务器</p>
            </div>
            <i class="fas fa-image"></i>
        </div>

        <button type="submit" class="btn btn-submit">
            <i class="fas fa-save mr-2"></i>保存会议
        </button>

        <div v-if="error" class="alert alert-danger">
            <i class="fas fa-exclamation-triangle mr-2"></i>{{error}}
        </div>
    </form>

    <div class="form-footer">
        <p>© 2025 电商管理系统 | 会议管理模块</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            meeting: {
                title: '',
                startTime: '',
                endTime: '',
                creator: '',
                content: '',
                coverImage: ''
            },
            file: null,
            previewImage: '',
            error: '',
            isUploading: false
        },
        methods: {
            formatDateTime(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                if (isNaN(date.getTime())) return dateString;
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}`;
            },
            checkForm() {
                this.error = '';
                document.querySelectorAll('.form-control').forEach(el => {
                    el.classList.remove('is-invalid');
                });

                if (!this.meeting.title) {
                    this.error = '会议名称不能为空';
                    this.focusOnError('title');
                    return;
                }
                if (!this.meeting.startTime) {
                    this.error = '开始时间不能为空';
                    this.focusOnError('startTime');
                    return;
                }
                if (!this.meeting.endTime) {
                    this.error = '结束时间不能为空';
                    this.focusOnError('endTime');
                    return;
                }
                if (!this.meeting.creator) {
                    this.error = '创建人不能为空';
                    this.focusOnError('creator');
                    return;
                }
                if (!this.meeting.content) {
                    this.error = '会议内容不能为空';
                    this.focusOnError('content');
                    return;
                }
                if (this.meeting.startTime && this.meeting.endTime && this.meeting.startTime >= this.meeting.endTime) {
                    this.error = '结束时间必须晚于开始时间';
                    this.focusOnError('endTime');
                    return;
                }

                // 格式化日期
                if (this.meeting.startTime) {
                    this.meeting.startTime = this.formatDateTime(this.meeting.startTime);
                }
                if (this.meeting.endTime) {
                    this.meeting.endTime = this.formatDateTime(this.meeting.endTime);
                }

                this.submitForm();
            },
            handleFileUpload(e) {
                const file = e.target.files[0];
                if (file) {
                    this.file = file;
                    this.previewImage = URL.createObjectURL(file);
                    const isValid = this.validateFile(file);
                    if (!isValid) {
                        this.file = null;
                        this.previewImage = '';
                        e.target.value = ''; // 清除文件输入框
                    }
                }
            },
            validateFile(file) {
                const fileType = file.type;
                const fileSize = file.size / 1024 / 1024;
                if (!fileType.match('image.*')) {
                    this.error = '请上传图片文件（支持JPG、PNG等格式）';
                    return false;
                }
                if (fileSize > 5) {
                    this.error = '图片大小不能超过5MB';
                    return false;
                }
                return true;
            },
            uploadImage() {
                this.isUploading = true;
                const formData = new FormData();
                formData.append('file', this.file);
                axios.post('/api/upload/image', formData, {
                    headers: {'Content-Type': 'multipart/form-data'}
                })
                    .then(res => {
                        this.meeting.coverImage = res.data.url;
                        this.submitForm();
                    })
                    .catch(err => {
                        this.error = '图片上传失败：' + (err.response?.data?.message || '请稍后再试');
                        console.error(err);
                    })
                    .finally(() => {
                        this.isUploading = false;
                    });
            },
            focusOnError(fieldId) {
                const input = document.getElementById(fieldId);
                if (input) {
                    input.focus();
                    input.classList.add('is-invalid');
                }
            },
            submitForm() {
                if (this.file && !this.isUploading) {
                    this.uploadImage();
                    return;
                }

                // 序列化表单数据
                const formData = new FormData(this.$el.querySelector('form'));

                // 手动添加coverImage字段（如果有）
                if (this.meeting.coverImage) {
                    formData.append('coverImage', this.meeting.coverImage);
                }

                axios.post('/admin/meeting/add', formData, {
                    headers: {'Content-Type': 'multipart/form-data'}
                })
                    .then(res => {
                        alert('会议添加成功！');
                        window.location.href = '/admin/meeting/list';
                    })
                    .catch(err => {
                        this.error = '提交失败：' + (err.response?.data?.message || '请检查填写内容');
                        console.error(err);
                    });
            }
        }
    });
</script>
</body>
</html>